import React, { Component } from 'react'
import { cartList, cartDel } from '../../request/api'
import { NavBar, Icon } from 'antd-mobile';
import '../../assets/css/topBar.css';
import { Toast, WhiteSpace, WingBlank, Button,NoticeBar } from 'antd-mobile';
export default class Cart extends Component {
    constructor() {
        super()
        this.state = {
            sel: "",
            checked: [],
            checkAll: false,
            checkGoods: false,
            sum: 0,
            num: 1,
            cartList: [{ content: [] }, { content: [] }],
            user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : []
        }
    }

    componentDidMount() {   
        console.log(this.state.user!=[]);
        console.log(this.state.user);
        if (Object.values(this.state.user)[1]) {
            console.log(123);
            let uid = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")).uid : []
            let data = {
                uid
            }
            console.log(data);
            cartList(data).then(res => {
                console.log(res);
                if (res.code === 200) {
                    this.setState({ cartList: res.list })
                }
            })

            // setTimeout(() => {
            //     console.log(this.state.cartList);
            // }, 1000);
        }

    }

    changeOne(data) {
        // console.log(checked);
        // // this.setState({})
        // this.state.checkAll = this.state.cartList[1].content.every((item) => item.checked);
        // this.forceUpdate()
        // this.setState({checkAll:this.state.checkAll})
        // console.log(this.state.checkAll);

        if (this.state.checked.includes(data)) {
            //包含该选项
            //干掉他
            // 1.获取下标
            let index = this.state.checked.findIndex(item => item === data)
            // 2.删除
            this.state.checked.splice(index, 1)
            // 3.更新视图
            this.setState({ checked: this.state.checked })

        } else {
            // 不包含该选项
            // push他
            this.state.checked.push(data)
            // 更新视图
            this.setState({ checked: this.state.checked })
        }

        if (this.state.checked.length === this.state.cartList[1].content.length) {
            this.setState({
                checkAll: true
            })
        } else {
            this.setState({
                checkAll: false
            })
        }
        let sum = 0
        this.state.checked.forEach(item => {
            this.state.cartList[1].content.forEach(i => {
                if (i.id === item) {
                    sum += i.num * i.price;
                }
            })
        })

        this.setState({ sum: sum.toFixed(2) })
        console.log(sum);
    }
    changeAll() {
        // this.state.checkAll = !this.state.checkAll
        // this.state.checkGoods = !this.state.checkGoods
        // // this.setState({ checkAll: !this.state.checkAll })
        // this.forceUpdate()
        // this.state.cartList.forEach((item) => {
        //     item.content.forEach(i => {
        //         i.checked = this.state.checkAll;
        //     })
        // });
        this.state.checkAll = !this.state.checkAll
        if (this.state.checkAll) {

            this.state.cartList[1].content.forEach(item => {
                this.state.checked.push(item.id)
            })

        } else {
            this.state.cartList[1].content.forEach(item => {
                this.state.checked = []
            })

        }

        let sum = 0
        this.state.checked.forEach(item => {
            this.state.cartList[1].content.forEach(i => {
                if (i.id === item) {
                    sum += i.num * i.price;
                }
            })
        })

        this.setState({
            checked: this.state.checked,
            checkAll: this.state.checkAll,
            sum: sum.toFixed(2)
        })
    }
    del(id) {
        cartDel({ id }).then(res => {
            if (res.code === 200) {
                // console.log(res);
                // this.forceUpdate()
                Toast.success('删除成功', 1);
                // alert("删除成功")
            }
        })
        let uid = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")).uid : []
        let data = {
            uid
        }
        console.log(data);
        cartList(data).then(res => {
            console.log(res);
            if (res.code === 200) {
                this.setState({ cartList: res.list })
            }
        })
    }

    balance() {
        let arr = []
        this.state.checked.forEach(item => {
            this.state.cartList[1].content.forEach(i => {
                if (i.id === item) {
                    arr.push(i)
                }
            })
        })
        console.log(arr);
        console.log(this.props.history)
        this.props.history.push({ pathname: "/order", state: { cart: arr } })
    }
    render() {
        const { cartList, num, sum, checked, checkAll, checkGoods, user } = this.state
        console.log(Object.values(user)[1]);
        return (
          
            <>
                <NavBar
                    mode="dark"
                >购物车</NavBar>
                {Object.values(user)[1] ?
                    <div className="cartShow">
                        {/* <!-- 新导航栏 --> */}
                        <div className="new-nav">
                            <div className="inner">
                                <ul>
                                    <li><a href="" className="first">全部(20)</a></li>
                                    <li><a href="">降价(4)</a></li>
                                    <li><a href="">常卖(2)</a></li>
                                    <li><a href="">分类<i className="iconfont icon-icon_-shangxiajiantou"></i></a></li>
                                </ul>
                            </div>
                        </div>


                        {/* <!-- 主区域 --> */}
                        <div className="main-zone">
                            <div className="main-show">
                                <div className="row-first">
                                    <div className="row-l">
                                        <input type="checkbox" name="selectAll" checked={checkGoods} onChange={() => this.changeAll} />
                                        <span>商品</span>
                                    </div>
                                    <div className="row-r">
                                        <span>已免运费</span>
                                        <span>领券</span>
                                    </div>
                                </div>

                                {
                                    cartList[1].content.map(item => (
                                        <div className="row-second" key={item.id}>
                                            <div className="row-second-inner">
                                                <input type="checkbox" name="selectAll" checked={checked.includes(item.id)} onChange={() => this.changeOne(item.id)} />
                                                <img src={this.$pregImg + item.img} alt="" />
                                                <div className="row-second-r">
                                                    <p>{item.goodsname}</p>
                                                    <p>敏感肌可用，控油祛痘、男女可...</p>
                                                    <form action="">
                                                        <select onChange={(e) => this.setState({ sel: e.target.value })}>
                                                            <option value="0" >非常新鲜</option>
                                                            <option value="1">新鲜</option>
                                                            <option value="2">半成新</option>
                                                        </select>
                                                    </form>
                                                    <p className="p4">比加入时降低&yen;100</p>
                                                    <div className="row-second-b">
                                                        <div className="b-l">
                                                            <span className="sp1">&yen;{item.price}</span>
                                                            <span className="sp2">&yen;1099</span>
                                                        </div>
                                                        <div className="b-r">
                                                            <span className="sp01">-</span>
                                                            <input type="number" className="in01" value={item.num} onChange={(e) => this.setState({ num: e.targer.value })} />
                                                            <span className="sp02" >+</span>
                                                            <br />

                                                        </div>
                                                        <button type="button" className="btn btn-danger del" onClick={() => this.del(item.id)}>删除</button>
                                                    </div>
                                                </div>

                                            </div>


                                        </div>



                                    ))
                                }


                            </div>


                        </div>

                        {/* <!-- 主区域 --> */}
                        {/* <div className="main-zone">
                    <div className="main-show">
                        <div className="row-first">
                            <div className="row-l">
                                <input type="checkbox" name="selectAll" checked={checkGoods} onChange={() => this.changeAll} />
                                <span>万人团</span>
                            </div>
                            <div className="row-r">
                                <span>已免运费</span>
                                <span>领券</span>
                            </div>
                        </div>

                        {
                            cartList[0].content.map(item => (
                                <div className="row-second" key={item.id}>
                                    <div className="row-second-inner">
                                        <input type="checkbox" name="selectAll" checked={checked.includes(item.id)} onChange={() => this.changeOne(item.id)} />
                                        <img src={this.$pregImg + item.img} alt="" />
                                        <div className="row-second-r">
                                            <p>{item.goodsname}</p>
                                            <p>敏感肌可用，控油祛痘、男女可...</p>
                                            <form action="">
                                                <select onChange={(e) => this.setState({ sel: e.target.value })}>
                                                    <option value="0" >粉色 50ML</option>
                                                    <option value="1">粉色 150ML</option>
                                                    <option value="2">粉色 200ML</option>
                                                </select>
                                            </form>
                                            <p className="p4">比加入时降低&yen;100</p>
                                            <div className="row-second-b">
                                                <div className="b-l">
                                                    <span className="sp1">&yen;{item.price}</span>
                                                    <span className="sp2">&yen;1099</span>
                                                </div>
                                                <div className="b-r">
                                                    <span className="sp01">-</span>
                                                    <input type="number" className="in01" value={item.num} onChange={(e) => this.setState({ num: e.targer.value })} />
                                                    <span className="sp02">+</span>
                                                    <br />
                                                   
                                                </div>
                                                <button type="button" className="btn btn-danger del" onClick={()=>this.del(item.id)}>删除</button>
                                            </div>
                                        </div>

                                    </div>


                                </div>



                            ))
                        }


                    </div>


                </div> */}




                        {/* <!-- 全选固定导航栏 --> */}
                        <div className="nav-fix-all">
                            <div className="inner">
                                <a href="" className="a1">
                                    <input type="checkbox" checked={checkAll} onChange={() => this.changeAll()} />
                                    <span>全选</span>
                                </a>
                                <a href="" className="a2">
                                    <span>合计</span>
                                    <span>已免运费</span>
                                </a>
                                <a href="" className="a3">
                                    <span>&yen;{sum}</span>
                                    <span>已优惠&yen;0元</span>
                                </a>
                                <input type="submit" value="结算" onClick={() => this.balance()} />
                            </div>

                        </div>


                        {/* <!-- 固定导航栏 --> */}
                    </div>

                    :
                    <div className="goLogin">
                       <WhiteSpace size="lg" />
                        <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
                           您还未登录，请去登录
                        </NoticeBar>
                        <WhiteSpace size="lg" />
                        <Button loading  onClick={()=>this.props.history.push("/login")}>点击我登录,等待点击中</Button><WhiteSpace />
                    </div>
                }
                <br /> <br /> <br /> <br />
            </>
        )
    }
}
